<template>
  <div class="toPayDeposit">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">订金支付</x-header>
    <div class="topHolder"></div>
    <card>
      <div class="card-padding" slot="content">
        <h2 class="deposit">
          ¥ <span v-text="formatCurrency(deposit)"></span> 元<br/>
          <small>需缴纳订金</small>
        </h2>
        <p class="description">
          注：<br/>
          <span v-html="description"></span>
        </p>
      </div>
    </card>
    <group label-width="5em" title="订台信息：">
      <cell title="订台类型" v-if="subscribeDetail.SUBSCRIBE_TYPE == 0">普通预订</cell>
      <cell title="订台类型" v-if="subscribeDetail.SUBSCRIBE_TYPE == 1">节日/派对预订</cell>
      <cell title="房台类型" :value="subscribeDetail.ROOM_PLATFORM_TYPE"></cell>
      <cell title="预订时间" :value="subscribeDetail.SUBSCRIBE_DATETIME"></cell>
      <cell title="手机号" :value="subscribeDetail.PHONE"></cell>
      <cell title="消费人数" :value="subscribeDetail.CONSUMPTION_NUMBER"></cell>
      <cell title="客户名称" :value="subscribeDetail.CUSTOMER_NAME"></cell>
      <cell title="备注" :value="subscribeDetail.REMARK"></cell>
    </group>
    <box gap="1rem 0.8rem">
      <check-icon :value.sync="agreeTerm">我同意</check-icon>
      <router-link class="depositTerm" :to="{path:'/depositTerm'}">《预订协议》</router-link>
      <br/><br/>
      <x-button :gradients="['#FF2719', '#FF61AD']" @click.native="submit" :show-loading="loadingStatus" :disabled="loadingStatus" text="立即支付"></x-button>
    </box>
  </div>
</template>

<script>
  import { Group, Cell, Box, Card, XButton, CheckIcon, numberComma } from 'vux'
  import {getSubscribeById,getDepositAbout} from "../../api";
  import {message,toDecimal2} from "../../common/util";

  export default {
    name:'toPayDeposit',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        paramSubscribeId:this.$route.params.subscribeId,
        loadingStatus:true,
        deposit:0.00,
        description:'',
        subscribeDetail:{},
        agreeTerm:false
      }
    },
    components:{
      Group,
      Cell,
      Box,
      Card,
      XButton,
      CheckIcon
    },
    computed:{

    },
    methods:{
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      submit(){
        if(this.agreeTerm){
          this.$vux.confirm.show({
            title:'是否支付预订',
            content:'请确认是否支付订金？',
            onConfirm: ()=> {
              this.$router.push({path:'/subscribeManager'})
            }
          })
        }else{
          message({message:'请选中同意协议条款',type:'error'})
        }
      }
    },
    mounted(){
      return new Promise((resolve,reject)=>{
        getSubscribeById(this.paramSubscribeId).then((res)=>{
          if(res.status == 'success'){
            if(res.data.STATE != 8 && res.data.IS_DEPOSIT == 1){
              this.$vux.alert.show({
                title: '重复支付',
                content: '该订单已支付，无需重复支付',
                onHide: ()=> {
                  this.$router.push({path:'/subscribeManager'})
                }
              })
            }
            this.subscribeDetail = res.data
            resolve()
          }else if(res.status == 'error') {
            message({message:res.msg,type:'error'})
            console.log('getSubscribeById error info:', res.msg)
          }
        }).catch((err)=>{console.log('getSubscribeById catch info:',err)})
      }).then(()=> {
        getDepositAbout(this.subscribeDetail.ROOMPLATFORMTYPE_ID).then((res)=>{
          if(res.status == 'success'){
            this.deposit = res.data.deposit
            this.description = res.data.description
            this.loadingStatus = false
          }else if(res.status == 'error') {
            message({message:res.msg,type:'error'})
            console.log('getDepositAbout error info:', res.msg)
          }
          this.$store.commit('updateLoadingStatus',{isLoading:false})
        }).catch((err)=>{console.log('getDepositAbout catch info:',err)})
      })

    }
  }
</script>

<style lang="scss" scoped>
  .toPayDeposit{
    h2.deposit{
      font-size:2rem;color:#636363;text-align: center;margin-bottom: 1rem;
      small{font-size:1rem;color: #999999;}
    }
    p.description{color: #bd3244;font-size: 1rem;}
    .depositTerm{display: inline-block;vertical-align: bottom;color: #55a532;text-decoration: underline;}
  }
</style>
